<template>
  <view class="contentMain">
    <view style="display: grid; grid-template-columns: 1fr 2fr">
      <view
        class="imgs"
        :style="{ backgroundImage: `url(${Detail?.goods_thumb_img})` }"
      ></view>
      <view
        style="
          display: flex;
          align-items: center;
          flex-direction: column;
          gap: 20rpx;
          justify-content: center;
        "
      >
        <view style="font-size: 32rpx; font-weight: 600">{{
          Detail?.goods_name
        }}</view>
        <view style="display: flex; justify-content: end">
          <button class="button" type="primary" @click="xiangQing(Detail.id)">
            规格选型
          </button>
        </view>
      </view>
    </view>

    <view class="fuJian">
      <template v-for="item in Detail?.documents">
        <view
          class="fjItem"
          @click="goDocumentDoc(Detail.id, item.id)"
          v-if="item.children.length > 0"
        >
          <uni-icons :type="item.icon" size="60"></uni-icons>
          <view>{{ item.document_type }}</view>
        </view>
      </template>
    </view>
    <!-- <uni-collapse accordion v-model="accordionVal" @change="change">
			<uni-collapse-item v-for="item in Detail?.documents" :title="item.document_type">
				<view class="content">
					<view v-for="sonItem in item.children" class="boxSonItem">
						<view style="display: flex;">
							<view class="file"></view>
							<view style="margin-left: 20rpx;line-height: 50rpx;">{{sonItem.document_name}}</view>
						</view>
						<view style="display: flex;">
							<view class="btn" @click="showPdf(sonItem.document_path)">查看</view>
							<view class="btn" style="margin-left: 10rpx;" @click="sendEmail(sonItem)">发送邮件</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse> -->
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";

import { ref } from "vue";

import { getGoodsDetail, sendDocument } from "@/api/index.js";

const currtionRow = ref();

// pages/wuLian/documentDoc
function goDocumentDoc(id, document_id) {
  uni.navigateTo({
    url: `/chanPin/pages/documentDoc?goods_id=${id}&document_type_id=${document_id}`,
  });
}

const accordionVal = ref(0);

function change() {}

onLoad((option) => {
  console.log(option, 26);
  getGoodsDetail(option.id).then((e) => {
    console.log(e.data);
    Detail.value = e.data;
  });
});

const Detail = ref(null);

function xiangQing(id) {
  console.log(id);
  uni.navigateTo({
    url: "/chanPin/pages/chanPinXiangQing?id=" + id,
  });
}
const imgList = ref([]);
</script>

<style scoped>
.imgs {
  height: 300rpx;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
.fuJian {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  padding: 30rpx 20rpx;
  background-color: #f8f8f8;
  border-radius: 20rpx;
  margin: 30rpx 0;
}
.fjItem {
  height: 220rpx;
  border-radius: 15rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
.fjItem:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.fjItem view {
  margin-top: 15rpx;
  font-size: 28rpx;
  color: #333;
}
.fjItem .uni-icons {
  color: #e60012;
}
.contentMain {
  padding: 0 20rpx;
}

.button {
  width: 400rpx;
  font-size: 24rpx;
  margin-left: 56%;
}

.file {
  background-image: url("/static/file.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 50rpx;
  height: 50rpx;
}

.boxSonItem {
  display: flex;
  justify-content: space-between;
}

.btn {
  padding: 10rpx 20rpx;
  border: 2rpx solid #e60012;
  background-color: #e60012;
  color: #fff;
  font-size: 24rpx;
  border-radius: 10rpx;
}

.content {
  padding: 20rpx 20rpx;
}
</style>
